<!doctype html>
<html lang="zh-Hans">
	<head>
		<title>电容换算器 - 嵌入式工具集</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- 引入Tailwind CSS -->
		<script src="https://cdn.tailwindcss.com"></script>
		<!-- 以下为浏览器中的配置，正式 编译之后请注释掉这段-->
		<link rel="stylesheet" href="../styles/styles.css" />
		<!-- 以下为LCEDA中的配置，正式 编译之后请勿注释这段-->
		<link rel="stylesheet" href="/iframe/styles/styles.css" />
		<style>
			/* 电容换算器特定样式 */
			/* 确保上标正确显示 */
			sup {
				font-size: 0.75em;
				line-height: 0;
				position: relative;
				vertical-align: baseline;
				top: -0.5em;
			}

			/* 电容换算器卡片背景颜色样式 - 内联实现避免外部样式加载问题 */
			.farad-card {
				background: linear-gradient(135deg, #ffcc80 0%, #ffb74d 100%);
				color: #333;
			}

			.millifarad-card {
				background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
				color: #333;
			}

			.microfarad-card {
				background: linear-gradient(135deg, #90caf9 0%, #64b5f6 100%);
				color: #333;
			}

			.nanofarad-card {
				background: linear-gradient(135deg, #ce93d8 0%, #ba68c8 100%);
				color: #333;
			}

			.picofarad-card {
				background: linear-gradient(135deg, #ff8a65 0%, #ff7043 100%);
				color: #333;
			}

			/* 图标样式 - 确保在嘉立创EDA环境中正常显示 */
			.fa {
				display: inline-block;
				width: 1em;
				height: 1em;
				font-size: inherit;
				line-height: 1;
				vertical-align: middle;
				text-align: center;
			}

			.fa-exchange:before {
				content: '⇄';
				font-size: 1.2em;
			}

			.fa-refresh:before {
				content: '↺';
				font-size: 1.2em;
			}

			/* 确保在嘉立创EDA环境中结果卡片正确显示 */
			.result-cards {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem;
				margin-top: 1.5rem;
				margin-bottom: 1.5rem;
				width: 100%;
				box-sizing: border-box;
			}

			.result-card {
				padding: 1.25rem;
				border-radius: 12px;
				text-align: center;
				transition:
					transform 0.2s ease,
					box-shadow 0.2s ease;
			}

			.result-card:hover {
				transform: translateY(-2px);
				box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
			}

			.result-title {
				font-size: 0.875rem;
				margin-bottom: 0.5rem;
				opacity: 0.9;
				font-weight: 500;
			}

			.result-value {
				font-size: 1.25rem;
				font-weight: 700;
				margin-bottom: 0.25rem;
			}

			/* 响应式设置 - 确保小屏幕显示正确 */
			@media (max-width: 640px) {
				.result-cards {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			/* 确保在插件环境中的兼容性 */
			body {
				margin: 0;
				padding: 0;
				font-size: 16px;
			}

			/* 增强按钮样式 - 与欧姆计算器保持一致 */
			.btn-primary {
				background-color: #0891b2;
				color: white;
				border: none;
				border-radius: 8px;
				padding: 0.75rem;
				cursor: pointer;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				font-weight: 600;
				font-size: 1rem;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
				height: 3.5rem;
			}

			.btn-primary:hover:not(.bg-gray-400) {
				background-color: #0e7490;
				transform: translateY(-2px);
				box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
			}

			.btn-secondary {
				background-color: #f59e0b;
				color: white;
				border: none;
				border-radius: 8px;
				padding: 0.75rem;
				cursor: pointer;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				font-weight: 600;
				font-size: 1rem;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
				height: 3.5rem;
			}

			.btn-secondary:hover {
				background-color: #d97706;
				transform: translateY(-2px);
				box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
			}
		</style>
	</head>
	<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen p-6 font-sans">
		<div class="w-full mx-auto bg-white rounded-2xl shadow-lg p-6 calculator-container capacitance-calculator">
			<h2 class="text-2xl font-bold text-primary mb-6 text-center">电容换算器</h2>

			<div class="formula-box">
				<div class="formula-title">单位换算关系</div>
				<div class="formula-text">1 F = 1,000,000 μF = 1,000,000,000 nF = 1,000,000,000,000 pF</div>
			</div>

			<!-- 输入区域 -->
			<div class="input-group">
				<div class="input-label">电容值</div>
				<div class="input-field">
					<input type="number" id="capacitance-value" class="input-live" placeholder="请输入电容值" value="1" />
				</div>
			</div>

			<div class="input-group">
				<div class="input-label">单位</div>
				<div class="input-field">
					<select id="capacitance-unit" class="input-live">
						<option value="F">法拉 (F)</option>
						<option value="mF">毫法 (mF)</option>
						<option value="μF" selected>微法 (μF)</option>
						<option value="nF">纳法 (nF)</option>
						<option value="pF">皮法 (pF)</option>
					</select>
				</div>
			</div>

			<!-- 操作区域 -->
			<div class="flex items-center space-x-3 mt-2">
				<!-- 实时更新选择框 -->
				<div class="flex items-center space-x-2 bg-gray-50 p-3 rounded-lg border border-gray-100">
					<input type="checkbox" id="live-calculation" checked />
					<label for="live-calculation" class="text-sm font-medium text-gray-700 cursor-pointer flex items-center justify-center h-full"
						>实时更新</label
					>
				</div>

				<!-- 转换按钮 -->
				<button onclick="capacitanceConvert()" id="convert-button" class="btn-primary flex-1"><i class="fa fa-exchange mr-2"></i>转换</button>

				<!-- 清空按钮 -->
				<button onclick="capacitanceClear()" class="btn-secondary flex-1"><i class="fa fa-refresh mr-2"></i>重置</button>
			</div>

			<!-- 结果显示区域 -->
			<div id="capacitance-results" class="result-cards">
				<div class="result-card farad-card">
					<div class="result-title">法拉 (F)</div>
					<div class="result-value" id="result-F">0</div>
				</div>
				<div class="result-card millifarad-card">
					<div class="result-title">毫法 (mF)</div>
					<div class="result-value" id="result-mF">0</div>
				</div>
				<div class="result-card microfarad-card">
					<div class="result-title">微法 (μF)</div>
					<div class="result-value" id="result-μF">0</div>
				</div>
				<div class="result-card nanofarad-card">
					<div class="result-title">纳法 (nF)</div>
					<div class="result-value" id="result-nF">0</div>
				</div>
				<div class="result-card picofarad-card">
					<div class="result-title">皮法 (pF)</div>
					<div class="result-value" id="result-pF">0</div>
				</div>
			</div>
		</div>

		<script>
			// 电容转换计算
			function capacitanceConvert() {
				// 移除按钮禁用状态检查，以便实时计算功能正常工作
				// 即使按钮被禁用，也应允许通过代码调用执行计算

				const value = parseFloat(document.getElementById('capacitance-value').value);
				const unit = document.getElementById('capacitance-unit').value;

				if (isNaN(value)) {
					return;
				}

				// 转换为法拉
				let valueInFarads;
				switch (unit) {
					case 'F':
						valueInFarads = value;
						break;
					case 'mF':
						valueInFarads = value / 1000;
						break;
					case 'μF':
						valueInFarads = value / 1000000;
						break;
					case 'nF':
						valueInFarads = value / 1000000000;
						break;
					case 'pF':
						valueInFarads = value / 1000000000000;
						break;
				}

				// 转换为其他单位 (1 F = 1000 mF = 1000000 μF = 1000000000 nF = 1000000000000 pF)
				const valueInMF = valueInFarads * 1000; // 法拉转毫法
				const valueInUF = valueInFarads * 1000000; // 法拉转微法
				const valueInNF = valueInFarads * 1000000000; // 法拉转纳法
				const valueInPF = valueInFarads * 1000000000000; // 法拉转皮法

				// 更新显示，根据数值大小选择合适的精度
				updateResultWithAnimation('result-F', formatValue(valueInFarads) + ' F');
				updateResultWithAnimation('result-mF', formatValue(valueInMF) + ' mF');
				updateResultWithAnimation('result-μF', formatValue(valueInUF) + ' μF');
				updateResultWithAnimation('result-nF', formatValue(valueInNF) + ' nF');
				updateResultWithAnimation('result-pF', formatValue(valueInPF) + ' pF');
			}

			// 更新结果并添加动画效果
			function updateResultWithAnimation(elementId, value) {
				const element = document.getElementById(elementId);
				if (!element) return;

				// 添加更明显的过渡效果
				element.style.transition = 'all 0.3s ease-in-out';
				element.style.opacity = '0.5';
				element.style.transform = 'scale(0.95)';

				setTimeout(() => {
					element.textContent = value;
					element.style.opacity = '1';
					element.style.transform = 'scale(1)';
				}, 150);
			}

			// 格式化数值，保持与其他计算器一致
			function formatValue(value) {
				// 处理极大或极小的数值，避免显示过多小数位
				if (Math.abs(value) >= 1e6) {
					return value.toExponential(3);
				} else if (Math.abs(value) < 1e-6) {
					return value.toExponential(3);
				} else if (Math.abs(value) >= 1) {
					return value.toFixed(6).replace(/\.?0+$/, '');
				} else {
					// 对于小于1的正数，保留适当的有效数字
					const parts = value.toString().split('.');
					if (parts.length === 2) {
						// 找到第一个非零数字的位置
						const firstNonZero = parts[1].search(/[1-9]/);
						if (firstNonZero !== -1) {
							// 保留到第一个非零数字后3位
							const precision = firstNonZero + 4;
							return value.toFixed(precision).replace(/\.?0+$/, '');
						}
					}
					return value.toFixed(9).replace(/\.?0+$/, '');
				}
			}

			// 清空输入和结果
			function capacitanceClear() {
				document.getElementById('capacitance-value').value = '1';
				document.getElementById('capacitance-unit').value = 'μF';
				capacitanceConvert();
			}

			// 添加实时计算事件监听
			document.addEventListener('DOMContentLoaded', function () {
				const valueInput = document.getElementById('capacitance-value');
				const unitSelect = document.getElementById('capacitance-unit');
				const liveCalculationCheckbox = document.getElementById('live-calculation');

				// 事件处理函数，根据实时计算选项决定是否触发计算
				function handleInputChange() {
					if (liveCalculationCheckbox.checked) {
						capacitanceConvert();
					}
				}

				// 为输入框添加事件监听
				valueInput.addEventListener('input', handleInputChange);
				valueInput.addEventListener('change', handleInputChange);
				valueInput.addEventListener('blur', handleInputChange);
				valueInput.addEventListener('keyup', function (event) {
					// 支持回车键触发计算，无论实时计算是否启用
					if (event.key === 'Enter') {
						capacitanceConvert();
					}
				});

				// 为下拉选择框添加事件监听
				unitSelect.addEventListener('change', handleInputChange);
				unitSelect.addEventListener('input', handleInputChange);

				// 获取转换按钮元素
				const convertButton = document.getElementById('convert-button');

				// 更新转换按钮状态的函数
				function updateConvertButtonState() {
					if (liveCalculationCheckbox.checked) {
						convertButton.classList.add('opacity-50', 'cursor-not-allowed');
						convertButton.disabled = true;
					} else {
						convertButton.classList.remove('opacity-50', 'cursor-not-allowed');
						convertButton.disabled = false;
					}
				}

				// 实时计算选项改变时，如果勾选了则立即计算并更新按钮状态
				liveCalculationCheckbox.addEventListener('change', function () {
					updateConvertButtonState();
					// 无论勾选还是取消勾选，都重新计算一次
					capacitanceConvert();
				});

				// 页面加载时初始化按钮状态
				updateConvertButtonState();

				// 页面加载时初始化计算
				capacitanceConvert();
			});

			// 暴露给父页面的接口
			window.capacitanceConvert = capacitanceConvert;
			window.capacitanceClear = capacitanceClear;
		</script>

		<!-- 页脚 -->
		<footer class="w-full mx-auto mt-6 text-center text-sm text-gray-500">
			<p>版本号: V0.0.1-20251004</p>
		</footer>
	</body>
</html>
